<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>layui - select area</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
    <script>
        /^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
  </script>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form" lay-filter="formExample" id="formExample" style="padding: 20px 30px 0 0;">
                <div class="layui-form-item area-box">
                    <label class="layui-form-label">地址：</label>
                    <div class="layui-input-block" id='areabox'>
                        <div class="layui-input-inline" style="width: 120px">
                            <select name="addr.provAbbr" id="provAbbr" lay-filter="provAbbr" class="select" lay-verify="required"></select>
                        </div>
                        <div class="layui-input-inline" style="width: 120px">
                            <select name="addr.cityId" id="cityId" lay-filter="cityId" class="select" lay-verify="required">
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 120px">
                            <select name="addr.countyId" id='countyId' lay-filter="countyId" class="select" lay-verify="required">
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 450px">
                            <input id="address" name="addr.address" th:value="${vo.addr==null?'':vo.addr.address}" class="layui-input" type="text" lay-verify="required" placeholder="请输入..">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
layui
    .config({
        base: "js/ext"
    })
    .extend({
        selectArea: "{/}js/ext/selectArea"
    });
layui.use(["selectArea", "layer", "form"], function() {
    var $ = layui.$
        , form = layui.form
        , layer = layui.layer
        , selectArea = layui.selectArea;

    var ctx = '';

    selectArea.init({
        firstId: 'provAbbr'
        , children: {
            provAbbr: {
                id: 'provAbbr'
                , code: 'code'
                , name: 'name'
                , defaultValue: 'BJ'
                , prompt: '请选择省'
                , url: ctx + 'json/prov.json'
                , next: 'cityId'
            }
            , cityId: {
                id: 'cityId'
                , prompt: '请选择市'
                , url: ctx + 'json/city-{provId}.json'
                , next: "countyId"
            }
            , countyId: {
                id: 'countyId'
                , prompt: '请选择县/区'
                , url: ctx + 'json/county-{cityId}.json'
            }
        }
    });

});
</script>

</html>